<template>
	<el-container>
		<el-header>
			<div class="left-panel">
				<el-button type="primary" plain icon="el-icon-refresh" @click="tableRefresh(true)"></el-button>
			</div>
			<div class="right-panel">
				<div class="right-panel-search">
					<el-form inline v-model="search" label-position="right">
						<el-form-item label="状态">
							<el-select v-model="search.invoice_type" placeholder="请选择" clearable>
								<el-option value="" label="全部" />
								<el-option :value="1" label="收入" />
								<el-option :value="2" label="支出" />
							</el-select>
						</el-form-item>
						<el-form-item label="关键词">
							<el-input v-model="search.keyWord" placeholder="分销商会员昵称包含关键词" clearable></el-input>
						</el-form-item>
						<el-form-item>
							<el-button type="primary" icon="el-icon-search" @click="upsearch"></el-button>
						</el-form-item>
					</el-form>
				</div>
			</div>
		</el-header>
		<el-main class="nopadding">
			<scTableGdshop ref="table" tableName="discountActivityTable" :apiObj="apiObj" stripe remoteSort remoteFilter :params="tableParams"
						   :column="tableColumn">
				<template #invoice_fee="scope">
					<div v-if="scope.row.invoice_fee > 0" style="color: #529b2e;">
						{{ scope.row.invoice_fee > 0 ? "+" : "-" }}￥{{(Math.abs(scope.row.invoice_fee) / 100).toFixed(2)}}
					</div>
					<div v-else style="color: #c45656;">
						{{ scope.row.invoice_fee > 0 ? "+" : "-" }}￥{{(Math.abs(scope.row.invoice_fee) / 100).toFixed(2)}}
					</div>
				</template>
			</scTableGdshop>
		</el-main>
	</el-container>
</template>

<script>
import dayjs from "dayjs";

export default {
	name: "fenxiao-user-invoice",
	data() {
		return {
			apiObj: this.$API.fenxiao.userInvoice,
			baseUrl: '',
			search: {
				keyWord: '',
				invoice_type: '',
			},
			tableParams: {
				order: 'id desc',
			},
			tableColumn: [
				{
					prop: "invoice_no",
					label: "账单编号",
					width: 150
				},
				{
					prop: "fu_name",
					label: "分销商"
				},
				{
					prop: "m_nickname",
					label: "会员昵称"
				},
				{
					prop: "invoice_fee",
					label: "金额"
				},
				{
					prop: "invoice_type",
					label: "金额类型",
					width: 80,
					formatter: function (row, column, cellValue) {
						return cellValue === 1 ? "<span style='color: #95d475;font-weight: 700;'>收入</span>" : '<span style="color: #f89898;font-weight: 700;">支出</span>';
					}
				},
				{
					prop: "create_at",
					label: "时间",
					width: 150,
					formatter: function (row, column, cellValue) {
						return dayjs.unix(cellValue).format('YYYY-MM-DD HH:mm:ss');
					}
				}
			]
		}
	},
	methods:{
		tableRefresh(isClaer = false) {
			if (isClaer === true) {
				this.search.keyWord = '';
			}
			this.$refs.table.refresh();
		},
		//搜索
		upsearch(){
			this.$refs.table.upData(this.search)
		},
		dateFormat(_time) {
			return dayjs.unix(_time).format('YYYY-MM-DD HH:mm:ss')
		},
	}
}
</script>

<style scoped>

</style>
